<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>批量导入</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .cont-scroll-wrap {
            width: 148px;
            flex: auto;
            height: 0;
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-form :inline="true">
            <el-form-item>
                <el-button size="small" type="danger" @click="window.history.back()">返回</el-button>
            </el-form-item>
            <el-form-item>
                <el-upload class="upload-demo" ref="upload" action="" :on-change="handleChange" :file-list="fileList"
                    :show-file-list="false" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" :loading="loading" size="small" type="success"
                        @click="submitUpload(0)">上传文件</el-button>
                    <el-button style="margin-left: 10px;" :loading="loading"  size="small" type="success" @click="submitImage">上传图片</el-button>
                    <el-button :disabled="loading" style="margin-left: 10px;" size="small" type="danger"
                        @click="handleClean">清空</el-button>
                    <el-badge :value="success" style="margin-left: 10px;" class="item" type="success">
                        <el-button size="small">成功</el-button>
                    </el-badge>
                    <el-badge style="margin-left: 10px;" :value="error" class="item">
                        <el-button size="small">失败</el-button>
                    </el-badge>
                </el-upload>
            </el-form-item>
        </el-form>
        <div style="display: flex; width: 100%;">
            <div style="display: flex;flex-direction: column; flex-shrink: 1;  border: 1px solid #EBEEF5; padding: 10px; margin-right: 10px;">
                <upload-images :data="image"></upload-images>
                <div id="Main_Image" style="width: 100%; display: flex; flex-wrap: wrap;" class="cont-scroll-wrap">
                    <div class="preview" v-for="(item,index) in image" :key="item">
                        <el-image :ref="'Main'+index" :preview-src-list="[item.Base64]"
                            class="el-upload-list__item-thumbnail" fit="contain" :src="item.Base64"
                            style="width: 148px; height: 148px;"></el-image>
                        <span class="el-upload-list__item-actions">
                            <span @click="handleImgClick('Main'+index)" style="cursor: pointer;"><i
                                    class="el-icon-zoom-in"></i></span>
                            <span @click="RemoveImage(index)" style="cursor: pointer;"><i
                                    class="el-icon-delete"></i></span>
                        </span>
                    </div>
                </div>
            </div>
            <div style="width: 100%;">
                <el-table v-if="update" style="width: calc(95vw - 360px);" :data="tableData.slice((form.page-1)*form.limit,form.page*form.limit)" stripe border height="calc(100vh - 180px)">
                    <el-table-column type="expand">
                        <template slot-scope="{row}">
                            <el-table :data="row.Children.business_article_specifications" style="margin: 5px auto 0; width: 98%;" border>
                                <el-table-column label="规格名称" align="center" prop="Specifications_Name">
                                    <template v-slot="{row}">
                                        <el-input v-if="row.isEdit" v-model="row.Specifications_Name"></el-input>
                                        <span v-else>{{row.Specifications_Name}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="规格图片" align="center"  width="140" prop="Picture_URL">
                                    <template v-slot="{row}">
                                        <el-image fit="contain" :src="BASE_IMG + row.Picture_URL" style="width:100px;height: 100px;"></el-image>
                                    </template>
                                </el-table-column>
                                <el-table-column label="吊牌价" align="center" prop="Unit_Price">
                                    <template v-slot="{row}">
                                        <el-input v-if="row.isEdit" v-model="row.Unit_Price"></el-input>
                                        <span v-else>{{row.Unit_Price}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="SKU尺寸" align="center" prop="Size">
                                    <template v-slot="{row}">
                                        <el-input v-if="row.isEdit" v-model="row.Size"></el-input>
                                        <span v-else>{{row.Size}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="SKU重量" align="center" prop="Weight">
                                    <template v-slot="{row}">
                                        <el-input v-if="row.isEdit" v-model="row.Weight"></el-input>
                                        <span v-else>{{row.Weight}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="SKU单位" align="center" prop="Unit">
                                    <template v-slot="{row}">
                                        <el-input v-if="row.isEdit" v-model="row.Unit"></el-input>
                                        <span v-else>{{row.Unit}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="SKU数量" align="center" prop="SKU_Quantity">
                                    <template v-slot="{row}">
                                        <el-input v-if="row.isEdit" v-model="row.SKU_Quantity"></el-input>
                                        <span v-else>{{row.SKU_Quantity}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="小包装数量" align="center" prop="Package_Quantity">
                                    <template v-slot="{row}">
                                        <el-input v-if="row.isEdit" v-model="row.Package_Quantity"></el-input>
                                        <span v-else>{{row.Package_Quantity}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="包装尺寸" align="center" prop="SKU_Package_Size">
                                    <template v-slot="{row}">
                                        <el-input v-if="row.isEdit" v-model="row.SKU_Package_Size"></el-input>
                                        <span v-else>{{row.SKU_Package_Size}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="大包装数" align="center" prop="Carton_Quantity">
                                    <template v-slot="{row}">
                                        <el-input v-if="row.isEdit" v-model="row.Carton_Quantity"></el-input>
                                        <span v-else>{{row.Carton_Quantity}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="规格京东价" align="center" prop="JDCOM_Unit_Price">
                                    <template v-slot="{row}">
                                        <el-input v-if="row.isEdit" v-model="row.JDCOM_Unit_Price"></el-input>
                                        <span v-else>{{row.JDCOM_Unit_Price}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="规格京东链接" align="center" prop="JDCOM_URL">
                                    <template v-slot="{row}">
                                        <el-input v-if="row.isEdit" v-model="row.JDCOM_URL"></el-input>
                                        <span v-else>{{row.JDCOM_URL}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" width="180">
                                    <template v-slot="{row,$index}">
                                        <el-button size="small" :disabled="loading" :type="row.isEdit?'success':'primary'"
                                            @click="handleEdit(row)">{{row.isEdit?'保存':'修改'}}
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div style="margin: 5px auto 0; width: 98%; border: 1px solid #EBEEF5; ">
                                <div class="table_titel">
                                    <div class="titel">轮播图</div>
                                </div>
                                <div id="Main_Image" style="width: 100%; display: flex; flex-wrap: wrap;">
                                    <div class="preview" v-for="(item,index) in row.Children.business_article_pic.filter(i=>i.Picture_Type == '0')" :key="index">
                                        <el-image :ref="'Main'+index" :preview-src-list="[BASE_IMG + item.Picture_URL]"
                                            class="el-upload-list__item-thumbnail" fit="contain" :src="BASE_IMG + item.Picture_URL"
                                            style="width: 148px; height: 148px;"></el-image>
                                        <span class="el-upload-list__item-actions">
                                            <span @click="handleImgClick('Main'+index)" style="cursor: pointer;"><i
                                                    class="el-icon-zoom-in"></i></span>
                                            <span @click="RemoveImage('Main_Image',index)" style="cursor: pointer;"><i
                                                    class="el-icon-delete"></i></span>
                                        </span>
                                    </div>
                                </div>
                                <div class="table_titel">
                                    <div class="titel">详情图</div>
                                </div>
                                <div id="Main_Image" style="width: 100%; display: flex; flex-wrap: wrap;">
                                    <div class="preview" v-for="(item,index) in row.Children.business_article_pic.filter(i=>i.Picture_Type == '1')" :key="index">
                                        <el-image :ref="'Main'+index" :preview-src-list="[BASE_IMG + item.Picture_URL]"
                                            class="el-upload-list__item-thumbnail" fit="contain" :src="BASE_IMG + item.Picture_URL"
                                            style="width: 148px; height: 148px;"></el-image>
                                        <span class="el-upload-list__item-actions">
                                            <span @click="handleImgClick('Main'+index)" style="cursor: pointer;"><i
                                                    class="el-icon-zoom-in"></i></span>
                                            <span @click="RemoveImage('Main_Image',index)" style="cursor: pointer;"><i
                                                    class="el-icon-delete"></i></span>
                                        </span>
                                    </div>
                                </div>
                            </div>    
                        </template>
                    </el-table-column>
                    <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
                    <el-table-column label="商品编号" align="center" prop="Article_Code">
                        <template v-slot="{row}">
                            <el-input v-if="row.isEdit" v-model="row.Article_Code"></el-input>
                            <span v-else>{{row.Article_Code}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" align="center" prop="Article_Name">
                        <template v-slot="{row}">
                            <el-input v-if="row.isEdit" v-model="row.Article_Name"></el-input>
                            <span v-else>{{row.Article_Name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品图片" align="center" width="140" prop="Picture_URL">
                        <template v-slot="{row}">
                            <el-image fit="contain" :src="BASE_IMG + row.Picture_URL" style="width:100px;height: 100px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="品牌" align="center" prop="Brand_Name">
                        <template v-slot="{row}">
                            <el-input v-if="row.isEdit" v-model="row.Brand_Name"></el-input>
                            <span v-else>{{row.Brand_Name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="类别" align="center" prop="Category_Name">
                        <template v-slot="{row}">
                            <el-input v-if="row.isEdit" v-model="row.Category_Name"></el-input>
                            <span v-else>{{row.Category_Name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="款型" align="center" prop="Item_Name">
                        <template v-slot="{row}">
                            <el-input v-if="row.isEdit" v-model="row.Item_Name"></el-input>
                            <span v-else>{{row.Item_Name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="系列" align="center" prop="Series_Name">
                        <template v-slot="{row}">
                            <el-input v-if="row.isEdit" v-model="row.Series_Name"></el-input>
                            <span v-else>{{row.Series_Name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="吊牌价" align="center" prop="Unit_Price">
                        <template v-slot="{row}">
                            <el-input v-if="row.isEdit" v-model="row.Unit_Price"></el-input>
                            <span v-else>{{row.Unit_Price}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="京东价" align="center" prop="JDCOM_Unit_Price">
                        <template v-slot="{row}">
                            <el-input v-if="row.isEdit" v-model="row.JDCOM_Unit_Price"></el-input>
                            <span v-else>{{row.JDCOM_Unit_Price}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="京东链接" align="center" prop="JDCOM_URL">
                        <template v-slot="{row}">
                            <el-input v-if="row.isEdit" v-model="row.JDCOM_URL"></el-input>
                            <span v-else>{{row.JDCOM_URL}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center" width="100">
                        <template v-slot="{row}">
                            <el-tag
                                :type="row.isStatus=='1'?'success':row.isStatus=='2'?'danger':''">{{row.isStatus=='1'?'成功':row.isStatus=='2'?'失败':'待导入'}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="原因说明" align="center">
                        <template v-slot="{row}">
                            {{row.Cause}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="180">
                        <template v-slot="{row,$index}">
                            <el-button size="small" :disabled="loading" :type="row.isEdit?'success':'primary'"
                                @click="handleEdit(row)">{{row.isEdit?'保存':'修改'}}
                            </el-button>
                            <el-button size="small" :disabled="loading" type="danger"
                                @click="handleRemove($index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="form.page" :page-sizes="[15, 30 , 60 ,100, 200, 300, 400]" :page-size="form.limit"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
                </el-pagination> -->
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.min.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/import_article.js"></script>
</body>

</html>